<template>
  <div>
    <el-row>
      <el-col :span="6">
        <el-card class="e-card">
          <p class="cp1">课程共计收入</p>
          <p class="cp2">{{tableDataMemberss.getgetqq}}</p>
          <!-- <p class="cp3">每日销售额 666</p> -->
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="e-card">
          <p class="cp1">课程共计销量</p>
          <p class="cp2">{{tableDataMemberss.salesVolumeYear}}</p>
          <!-- <p class="cp3">每日销售额 666</p> -->
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="e-card">
          <p class="cp1">会员共计收入</p>
          <p class="cp2">{{tableDataMemberss.getmember}}</p>
          <!-- <p class="cp3">每日销售额 666</p> -->
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="e-card">
          <p class="cp1">会员共计销量</p>
          <p class="cp2">{{tableDataMemberss.getgetmenber}}</p>
          <!-- <p class="cp3 ">每日销售额 666</p> -->
        </el-card>
      </el-col>
    </el-row>
    <div style="height:20px"></div>
    <el-row>
      <el-col :span="15">
        <el-card style="width:98%;margin:0 auto;padding-bottom:0px">
          <el-tabs v-model="activeName">
            <el-tab-pane label="年度课程月收入" name="first">
              <el-select v-model="selectedYear1" placeholder="选择年份" style="width:100px" @change="sel1">
                <el-option v-for="year in years" :key="year" :label="year" :value="year">
                </el-option>
              </el-select>
              <div style="height:10px"></div>
              <div id="main" style="width:950px; height: 270px"></div>
            </el-tab-pane>
            <el-tab-pane label="年度会员月收入" name="second">
              <el-select v-model="selectedYear2" placeholder="选择年份" style="width:100px" @change="sel2">
                <el-option v-for="year in years" :key="year" :label="year" :value="year">
                </el-option>
              </el-select>
              <div style="height:10px"></div>
              <!-- 会员每月销量 -->
              <div id="mains" style="width:950px; height:270px"></div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
      <el-col :span="9">
        <el-card style="width:97%;margin:0 auto;">
          <!-- <div id="chart" style="width: 400px; height: 300px"></div> -->
          <div><span><b>年度会员课程收入占比</b></span></div>
          <div style="height:23px"></div>
          <el-select v-model="selectedYear3" placeholder="选择年份" style="width:100px" @change="handleSelectChange">
            <el-option v-for="year in years" :key="year" :label="year" :value="year">
            </el-option>
          </el-select>
          <div style="height:20px"></div>
          <div id="charts2" style="width: 100%; height: 270px;margin:0 auto"></div>
        </el-card>
      </el-col>

    </el-row>
    <div style="height:20px"></div>
    <el-card style="width:99%;margin:0 auto;">
      <span><b>销售订单排名</b></span>
      <div style="height:20px"></div>
      <template>
        <el-table :data="tableDatastj" style="">
          <el-table-column type="index" :index="indexMethod" align="center"> </el-table-column>
          <el-table-column prop="courseTitle" label="课程名称">
          </el-table-column>
          <el-table-column prop="coursePrice" label="课程价格" align="center">
            <template slot-scope="scope"><span>￥{{scope.row.coursePrice}}</span></template>
          </el-table-column>
          <el-table-column prop="courseClick" label="课程点击量" align="center">
          </el-table-column>
          <el-table-column prop="price" label="课程盈利金额" align="center">
            <template slot-scope="scope"><span>￥{{scope.row.price}}</span></template>
          </el-table-column>
          <el-table-column prop="value" label="销售量" align="center">
          </el-table-column>
        </el-table>
      </template>
    </el-card>
  </div>
</template>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      activeName: "first",
      selectedYear1: new Date().getFullYear(), // 当前选中的年份
      selectedYear2: new Date().getFullYear(), // 当前选中的年份
      selectedYear3: new Date().getFullYear(), // 当前选中的年份
      tableData: [], //课程 每月销量
      lableData: [], //课程 每月销量
      tableDatamemberMonth: [], //会员 每月销量
      lableDatamemberMonth: [], //会员 每月销量
      tableDatayear: [], //年销量
      tableDataMembers: [], //各个会员总销量
      tableDataMemberss: "", //总统计数据
      tableDataMembersss: "", //
      tableDatastj: [],
      ordersMembersmonth: [], // 课程 会员每年金额
    };
  },
  mounted() {
    this.getsalesVolume();
    this.getsalesVolumesYear();
    this.getMembers();
    this.getgetqq();
    this.courseRanking();
    this.getMemberMonth();
    this.getOrdersMembersmonth();
  },
  computed: {
    years() {
      const currentYear = new Date().getFullYear();
      const range = 20; // 可选择的年份范围，例如过去20年和未来20年
      const startYear = currentYear - range;
      const endYear = currentYear + range;

      const years = [];
      for (let year = startYear; year <= endYear; year++) {
        years.push(year);
      }
      return years;
    },
  },
  methods: {
    // 总金额的下拉框
    handleSelectChange(value) {
      this.getOrdersMembersmonth(value);
      // 在这里进行相应的处理逻辑
    },
    sel1() {
      this.getsalesVolume();
    },
    sel2() {
      this.getMemberMonth();
    },
    getsalesVolume() {
      // 查询 课程每月销量
      this.$axios
        .get("/Home/salesVolume", {
          params: {
            selectedYear: this.selectedYear1,
          },
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.tableData = res.data.data.data[0];
            this.lableData = res.data.data.data[1];
            this.initChart();
          }
          this.loading = false; // 加载圈绑定
        })
        .catch((err) => {
          // this.myMessage('error', err),
        });
    },
    getMemberMonth() {
      // 查询 会员每月销量
      this.$axios
        .get("/memberShip/getMemberMonth", {
          params: {
            selectedYear: this.selectedYear2,
          },
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.tableDatamemberMonth = res.data.data.data[0];
            this.lableDatamemberMonth = res.data.data.data[1];
            this.initCharts();
          }
          this.loading = false; // 加载圈绑定
        })
        .catch((err) => {
          // this.myMessage('error', err),
        });
    },
    getsalesVolumesYear() {
      // 查询年销量
      this.$axios
        .get("/Home/salesVolumeYear")
        .then((res) => {
          if (res.data.code === 200) {
            this.tableDatayear = res.data.data.data;
            this.initChartyear();
          }
          this.loading = false; // 加载圈绑定
        })
        .catch((err) => {
          // this.myMessage('error', err),
        });
    },
    getMembers() {
      // 查询年销量
      this.$axios
        .get("/memberShip/members")
        .then((res) => {
          if (res.data.code === 200) {
            this.tableDataMembers = res.data.data;
            this.renderMembers();
          }
          this.loading = false; // 加载圈绑定
        })
        .catch((err) => {
          // this.myMessage('error', err),
        });
    },
    getgetqq() {
      // 查询 课程总盈利  总销量
      this.$axios
        .get("/Home/getgetqq")
        .then((res) => {
          if (res.data.code === 200) {
            this.tableDataMemberss = res.data.data.data;
            this.tableDataMemberss.getgetqq = this.tableDataMemberss.getgetqq
              .toString()
              .replace(/\B(?=(\d{4})+(?!\d))/g, ",");
            this.tableDataMemberss.getmember = this.tableDataMemberss.getmember
              .toString()
              .replace(/\B(?=(\d{4})+(?!\d))/g, ",");
            this.tableDataMemberss.salesVolumeYear =
              this.tableDataMemberss.salesVolumeYear
                .toString()
                .replace(/\B(?=(\d{4})+(?!\d))/g, ",");
            this.tableDataMemberss.getgetmenber =
              this.tableDataMemberss.getgetmenber
                .toString()
                .replace(/\B(?=(\d{4})+(?!\d))/g, ",");
          }
          this.loading = false; // 加载圈绑定
        })
        .catch((err) => {
          // this.myMessage('error', err),
        });
    },
    courseRanking() {
      // 查询课程销量前五名
      this.$axios
        .get("/Home/courseRanking")
        .then((res) => {
          if (res.data.code === 200) {
            this.tableDatastj = res.data.data.data;
          }
        })
        .catch((err) => {
          // this.myMessage('error', err),
        });
    },
    getOrdersMembersmonth(value) {
      if (typeof value === "undefined") {
        const currentYear = new Date().getFullYear();
        value = currentYear.toString();
      }
      // 查询课程和会员每年销量
      this.$axios
        .get("/memberShip/getOrdersMembersmonth", {
          params: {
            selectedYear: value,
          },
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.ordersMembersmonth = res.data.data.data;
            this.renderPieChart();
          }
        })
        .catch((err) => {
          // this.myMessage('error', err),
        });
    },
    initChart() {
      // 柱状图 课程每月销量
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);

      var option = {
        tooltip: {},
        title: {
          text: "",
        },
        xAxis: {
          name: "月份",
          type: "category",
          data: this.tableData,
        },
        yAxis: {
          name: "课程销量",
          type: "value",
        },
        series: [
          {
            name: "月销量",
            type: "bar",
            data: this.lableData.map((item) => ({
              value: item,
              itemStyle: {
                color: "#3F87FF",
              },
            })),
          },
        ],
      };

      option && myChart.setOption(option);
    },
    initCharts() {
      // 柱状图 当年会员月销量
      var chartDom = document.getElementById("mains");
      var myChart = echarts.init(chartDom);

      var option = {
        tooltip: {},
        title: {
          text: "",
        },
        xAxis: {
          name: "月份",
          type: "category",
          data: this.tableDatamemberMonth,
        },
        yAxis: {
          name: "会员销量",
          type: "value",
        },
        series: [
          {
            name: "月销量",
            type: "bar",
            data: this.lableDatamemberMonth.map((item) => ({
              value: item,
              itemStyle: {
                color: "#3F87FF",
              },
            })),
          },
        ],
      };

      option && myChart.setOption(option);
    },
    initChartyear() {
      //饼状图 年销量
      var chartDom = document.getElementById("chart");
      var myChart = echarts.init(chartDom);

      var option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "年课程销量统计图",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.tableDatayear,
          },
        ],
      };

      option && myChart.setOption(option);
    },
    renderPieChart() {
      // 使用指定的 DOM 容器渲染饼状图
      var chartContainer = document.getElementById("charts2");
      var myChart = echarts.init(chartContainer);
      // 获取数据
      const existingCourseIncome = this.ordersMembersmonth.getgetqq;
      const memberIncome = this.ordersMembersmonth.getmember;

      // 准备饼状图数据
      const pieChartData = [
        { name: "现有课程总收入占比", value: existingCourseIncome },
        { name: "会员总收入占比", value: memberIncome },
      ];

      // 设置饼状图的配置项
      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} ({d}%)",
        },
        series: [
          {
            type: "pie",
            radius: "55%",
            center: ["40%", "50%"],
            data: pieChartData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            label: {
              show: true,
              formatter: "{b}: {c} ({d}%)",
            },
            labelLine: {
              show: true,
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    renderMembers() {
      // 会员月销量
      //饼状图 年销量
      var chartDom = document.getElementById("charts");
      var myChart = echarts.init(chartDom);

      var option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "当月会员销量统计图",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.tableDataMembers,
          },
        ],
      };

      option && myChart.setOption(option);
    },
    indexMethod(index) {
      return index + 1;
    },
  },
};
</script>

<style>
.e-card {
  width: 95%;
  margin: 0 auto;
}
.select-container {
  width: 210px;
  float: right;
}
.cp1 {
  font-size: 16px;
  line-height: 30px;
}
.cp2 {
  font-size: 20px;
  line-height: 40px;
}
.cp3 {
  font-size: 16px;
}
#main {
  width: 400px;
  height: 300px;
}
#mains {
  width: 400px;
  height: 300px;
}

#chart {
  width: 400px;
  height: 400px;
}
</style>